<%@ page import="java.net.URLDecoder" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>火车票下单</title>
    <style>
        .progress-nav {
            display: flex;
            align-items: center;
            justify-content: space-between;
            max-width: 1200px;
            margin: 30px auto;
            position: relative;
        }

        /* 进度条线条 */
        .progress-line {
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            height: 2px;
            background: #e0e0e0;
            z-index: 1;
        }

        /* 已完成的进度线 */
        .progress-line-completed {
            position: absolute;
            top: 50%;
            left: 0;
            height: 2px;
            background: #00c250;
            z-index: 2;
            transition: width 0.3s;
        }

        /* 进度步骤 */
        .progress-step {
            display: flex;
            align-items: center;
            position: relative;
            z-index: 3;
        }

        /* 步骤圆圈 */
        .step-circle {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: #fff;
            border: 2px solid #e0e0e0;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 8px;
            color: #999;
        }

        /* 当前步骤的圆圈 */
        .step-circle.active {
            background: #00c250;
            border-color: #00c250;
            color: white;
        }

        /* 已完成步骤的圆圈 */
        .step-circle.completed {
            background: #00c250;
            border-color: #00c250;
            color: white;
        }

        /* 步骤文字 */
        .step-text {
            font-size: 14px;
            color: #999;
        }

        /* 当前步骤的文字 */
        .step-text.active {
            color: #00c250;
        }

        /* 已完成步骤的文字 */
        .step-text.completed {
            color: #00c250;
        }
        /*订单样式*/
        .order-container {
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }

        .ticket-info {
            background: #f9f9f9;
            padding: 15px;
            border-radius: 4px;
            margin-bottom: 20px;
        }

        .passenger-form {
            margin-top: 20px;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            margin-bottom: 5px;
        }

        .form-group input {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        .submit-btn {
            background: #00c250;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .submit-btn:hover {
            background: #00a040;
        }
        /*协议样式*/
         .agreement-section {
             padding: 20px;
             background: #fff;
             margin: 20px 0;
         }

        .ticket-notice {
            padding: 15px 0;
            color: #666;
            font-size: 14px;
        }

        .ticket-notice span {
            color: #999;
        }

        .agreement-checkbox {
            display: flex;
            align-items: flex-start;
            margin-top: 15px;
            padding: 10px 0;
        }

        .agreement-checkbox input[type="checkbox"] {
            margin-top: 3px;
            margin-right: 8px;
        }

        .agreement-text {
            font-size: 12px;
            color: #666;
            line-height: 1.6;
        }

        .agreement-text a {
            color: #1890ff;
            text-decoration: none;
        }

        .agreement-text a:hover {
            text-decoration: underline;
        }

        .small-text {
            font-size: 12px;
            color: #999;
            margin-top: 10px;
            line-height: 1.5;
        }
        /*温馨提示*/
        /* 添加一个包裹容器 */
        .order-page-container {
            display: flex;
            justify-content: space-between;
            max-width: 1200px;
            margin: 20px auto;
            gap: 20px; /* 添加间距 */
        }

        /* 修改订单容器样式 */
        .order-container {
            flex: 2; /* 占据更多空间 */
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }

        /* 修改温馨提示容器样式 */
        .notice-container {
            flex: 1; /* 占据较少空间 */
            border: 1px solid #f0f0f0;
            border-radius: 4px;
            padding: 20px;
            background: #fff;
            height: fit-content; /* 高度适应内容 */
        }

        /* 其他样式保持不变 */
        .notice-title {
            font-size: 16px;
            color: #333;
            font-weight: bold;
            margin-bottom: 15px;
            border-bottom: 1px solid #f0f0f0;
            padding-bottom: 10px;
        }

        .notice-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .notice-list li {
            position: relative;
            padding-left: 12px;
            margin-bottom: 12px;
            color: #666;
            font-size: 14px;
            line-height: 1.6;
        }

        .notice-list li:before {
            content: "•";
            position: absolute;
            left: 0;
            color: #999;
        }

        .notice-list li:last-child {
            margin-bottom: 0;
        }
    </style>
</head>
<body>
<div>
    <img src="static/img/PS2lfS0492.jpg">
</div>
<!-- 进度条导航 -->
<div class="progress-nav">
    <!-- 背景进度条 -->
    <div class="progress-line"></div>
    <!-- 已完成进度条 -->
    <div class="progress-line-completed" style="width: 50%;"></div>

    <!-- 选择车次 -->
    <div class="progress-step">
        <div class="step-circle completed">1</div>
        <span class="step-text completed">选择车次</span>
    </div>

    <!-- 填写订单 -->
    <div class="progress-step">
        <div class="step-circle active">2</div>
        <span class="step-text active">填写订单</span>
    </div>

    <!-- 支付票款 -->
    <div class="progress-step">
        <div class="step-circle">3</div>
        <span class="step-text">支付票款</span>
    </div>

    <!-- 出票成功 -->
    <div class="progress-step">
        <div class="step-circle">4</div>
        <span class="step-text">出票成功</span>
    </div>
</div>
<div class="order-page-container">
<!-- 订单信息 -->
<div class="order-container">
    <h2>火车票订单</h2>

    <div class="ticket-info">
        <h3>车票信息</h3>
        <p>车次：<%=request.getParameter("ticketId")%></p>
        <p>出发城市：<%=URLDecoder.decode(request.getParameter("departureCity"), "UTF-8")%></p>
        <p>到达城市：<%=URLDecoder.decode(request.getParameter("arrivalCity"), "UTF-8")%></p>
        <p>出发日期：<%=request.getParameter("departureDate")%></p>
        <p>出发时间：<%=request.getParameter("startTime")%></p>
        <p>到达时间：<%=request.getParameter("endTime")%></p>
        <p>票价：￥<%=request.getParameter("price")%></p>
    </div>

    <form class="passenger-form" action="submitOrder" method="post">
        <input type="hidden" id="ticketId" name="ticketId" value="<%=request.getParameter("ticketId")%>">
        <input type="hidden" id="departureCity" name="departureCity" value="<%=request.getParameter("departureCity")%>">
        <input type="hidden" id="arrivalCity" name="arrivalCity" value="<%=request.getParameter("arrivalCity")%>">
        <input type="hidden" id="departureDate" name="departureDate" value="<%=request.getParameter("departureDate")%>">
        <input type="hidden" id="startTime" name="startTime" value="<%=request.getParameter("startTime")%>">
        <input type="hidden" id="endTime" name="endTime" value="<%=request.getParameter("endTime")%>">
        <input type="hidden" id="price" name="price" value="<%=request.getParameter("price")%>">
        <div class="agreement-section">
        <!-- 出票提示 -->
        <div class="ticket-notice">
            支付后可开票，请安心购票 <span>(行程单有效期28天，请及时申请)</span>
        </div>

        <!-- 协议同意部分 -->
        <div class="agreement-checkbox">
            <input type="checkbox" id="agreement-check" required>
            <label for="agreement-check" class="agreement-text">
                我已阅读并同意
                <a href="#">乘客应通过官方指定的售票窗口、官方网站、移动应用或其他授权销售渠道购买车票</a>、
                <a href="#">在购买时，乘客须提供真实有效的个人信息，包括但不限于姓名、身份证号码等</a>、
                <a href="#">购票前，请仔细核对所选行程信息（出发地、目的地、日期、时间、座位类型）</a>、
                <a href="#">票价以铁路公司在售出时公布的价格为准</a>、
                <a href="#">乘客需按照规定的支付方式完成付款；未按时支付可能导致订单取消</a>、
                <a href="#">火车票预订协议</a>、
                <a href="#">用户隐私行为与法律责任说明</a>、
                <a href="#">等服务及责任说明</a>
            </label>
        </div>

        <!-- 补充说明文本 -->
        <div class="small-text">
            请您仔细阅读并理解以下内容：根据航空公司要求，购买机票需提交乘机人身份证件信息，并在乘机时出具对应身份证件用于验证。请确保录入信息真实有效。同程旅行将通过加密等方式保护您录入的身份证件信息且仅具体订票过程中授权提供给为您提供服务的产品供应商、承运人、机票分销系统服务商。
        </div>
</div>
        <button type="submit" class="submit-btn">提交订单</button>
    </form>
</div>
    <div class="notice-container">
        <div class="notice-title">温馨提示</div>
        <ul class="notice-list">
            <li>购票结果及好处信息通知您：您也可以到订单中心查看。</li>
            <li>乘客姓名与证件号码与实名车票信息需完全一致，否则无法进站上车。乘客姓名与证件号码与实名车票信息需完全一致。</li>
            <li>身高超过1.5米的孩子需要买买成人票。</li>
            <li>选票到发购票成功后，会有短信通知您快递方式及单号。</li>
            <li>如未能出票，将第一时间为您退款（1~15工作日到账，以具体支付方式为准）</li>
            <li>选路选择上门后，车票仅能通过快递递送，无法至取票机取票。</li>
        </ul>
    </div>
</div>
</body>
</html>
